﻿@page "/tree-grid/column-menu"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p> This sample demonstrates the default functionalities of the Column Menu. Click on multiple icon of each column to open the column menu.</p>
</SampleDescription>
<ActionDescription>
    <p>Tree Grid has an option to show column menu while clicking on multiple icon of each column. The column menu has an integrated option to interact the features like sorting, filtering, column chooser, and autoFit. This features can be enabled by defining the <code>ShowColumnMenu</code> as true. The default items are<br> </p>
    <ul>
        <li><code>SortAscending</code> - Sort the current column in ascending order.</li>
        <li><code>SortDescending</code> - Sort the current column in descending order.</li>
        <li><code>AutoFit</code> - Auto fit current column.</li>
        <li><code>AutoFitAll</code> - Auto fit all columns.</li>
        <li><code>ColumnChooser</code> - Choose the column visibility.</li>
        <li><code>Filter</code> - Filter option is shown to filter the current column.</li>
    </ul>
    <p>In this demo, Column Menu feature has been enabled by defining <code>ShowColumnMenu</code> as true with sorting, filtering, and column chooser options. </p>
    <p>More information on the Column Menu can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/columns/#column-menu'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid height="315" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" AllowPaging="true" TreeColumnIndex="1" ShowColumnMenu="true" AllowSorting="true">
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="130" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="EndDate" HeaderText="End Date" Format="d" Type=ColumnType.Date Width="130" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="110"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();
    }
}
